<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>骗你学Vue系列之HelloWorld</title>
    </head>
    <div>
        <!--确定用于展现 vue.js 所生成内容的节点-->
        <div id="app"></div>
        <!--导入 vue.js 核心库-->
        <script src="vue@3.2.45.js" type="text/javascript"></script>
        <!--使用 vue.js 编写自己的代码-->
        <script>
            // 提供创建根组件时使用的选项
            const options = {
                template: `<p>欢迎{{username}}</p>
                           <input type="text" v-model="username">`,
                data() {
                    return {
                        username: '小芳'
                    }
                },
                // 生命周期钩子
                created() {
                    console.log('创建完毕', this);
                },
                // 生命周期钩子
                mounted() {
                    console.log('挂载成功', this);
                }
            }

            // 解构赋值
            const { createApp } = Vue;

            // 创建应用(实际上也创建了根组件)
            const application = createApp( options );
            // 将应用挂载到指定DOM节点
            application.mount( '#app' );
            console.log( application );
        </script>
    </div>
</html>